<script>
	import Divider from '$components/basic/divider/divider.svelte';
	import { decodeHTMLEntities } from '$utils/decode';

	// const createRandonColor = () => {
	// 	const color = `#${Math.floor(Math.random() * 20000000)
	// 		.toString(16)
	// 		.slice(-6)
	// 		.padStart(6, '0')}`;
	// 	return color;
	// };

	let bgColor = 'var(--mdc-theme-primary)';

	// function hexToRgb(hex) {
	// 	// 去掉 #
	// 	hex = hex.replace(/^#/, '');
	// 	// 解析 R, G, B
	// 	let bigint = parseInt(hex, 16);
	// 	let r = (bigint >> 16) & 255;
	// 	let g = (bigint >> 8) & 255;
	// 	let b = bigint & 255;

	// 	return { r, g, b };
	// }

	// function getContrastColor(hex) {
	// 	// 将十六进制颜色转换为 RGB
	// 	const { r, g, b } = hexToRgb(hex);

	// 	// 计算亮度
	// 	const brightness = (0.299 * r + 0.587 * g + 0.114 * b) / 255;

	// 	// 选择字体颜色
	// 	return brightness > 0.5 ? '#333' : '#ddd'; // 亮度 > 0.5 选择黑色，否则选择白色
	// }

	let color = '#f3f4f6';

	export let title = 'title';
	export let date = '';
	export let tag = '';
	export let answer = '';
</script>

<div class="w-full flex flex-col">
	<div class="flex-cc gap-10px">
		<tag
			class="rounded-md px-10px h-24px line-height-24px text-center font-size-14px"
			style={`background-color: ${bgColor}; color: ${color}`}>{tag}</tag
		>
		<div class="flex-1 title line-height-36px font-size-19px font-bold color-gray-7">{title}</div>
		<div class="font-size-14px color-gray-4 h-24px line-height-24px">{date}</div>
	</div>
	{#if answer}
		<div class="font-size-16px color-gray-6">
			<p class="mb-0">{@html decodeHTMLEntities(answer)}</p>
		</div>
	{/if}
	<Divider style="--mdc-theme-primary: #d1d5db " />
</div>
